<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>消息中心</el-breadcrumb-item>
      <el-breadcrumb-item>评论回复</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col>
        <el-table :data="list" stripe style="width: 100%;height:540px;overflow: auto;">
          <el-table-column prop="date" label="#" type="index" width="30"></el-table-column>
          <el-table-column label="电影" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.movie.title}}</span>
            </template>
          </el-table-column>
          <el-table-column label="电影图片" width="140">
            <template slot-scope="scope">
              <img
                :src="scope.row.movie.images.large.replace(/img7/,'img3')"
                alt="图片过于久远"
                style="width:50px;heigth:30px;margin-left:35px"
              />
            </template>
          </el-table-column>
          <el-table-column label="发表时间" width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style>{{ scope.row.time | timeFormat('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="评论标题" width="200">
            <template slot-scope="scope">
              <el-tag size="medium" effect="dark">{{ scope.row.title}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="评论内容" width="300">
            <template slot-scope="scope">
              <el-tag size="medium" effect="dark" type="info">{{  scope.row.content.substr(0,30)+(scope.row.content.length>30?'...':'')}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="评论回复">
            <template slot-scope="scope" >
              <el-badge value="new" class="item" style="margin-top: 10px;" v-if="scope.row.answer.length>=1">
                <el-button size="small" @click="dayin(scope.row.answer)">你有新的回复</el-button>
              </el-badge>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 弹出评论回复 -->
    <el-dialog title="评论回复" :visible.sync="dialogVisible" width="35%" >
      <el-row>
        <el-col v-for="(item,i) in answer" :key="i">
          <h2># {{i+1}} 楼</h2>
          <h2 style="width:140px">吐槽星人：{{item.author.substr(0,4)}}{{item.author.length>4?"...":""}}</h2>
          <el-popover placement="top-start" title="吐槽内容:" width="200" trigger="hover">
              <div v-html="item.subtitle"></div>
              <span slot="reference" v-html=" item.subtitle.substr(0,5)+(item.subtitle.length>5?'...':'')"></span>
          </el-popover>
          <el-tag type="success" style="margin:12px 0 0 20px">{{ item.time | timeFormat('YY-MM-DD HH:mm')}}</el-tag>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getmyping } from "@/api";
export default {
  data() {
    return {
      list: [],
      dialogVisible:false,
      answer:[],
    };
  },
  methods:{
    dayin(data){
      this.dialogVisible = true;
      this.answer = data;
      console.log(this.answer);
    }
  },
  mounted() {
    getmyping({
      author: sessionStorage.getItem("username"),
    }).then((res) => {
      this.list = res.result;
      console.log(this.list);
    });
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-breadcrumb__inner {
  color: rgb(240, 124, 124) !important;
}
.el-breadcrumb {
  font-size: 30px;
}
::v-deep .cell {
  text-align: center;
}
::v-deep .el-dialog{
  height: 400px !important;
  overflow: auto;
}
.el-col{
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  line-height: 60px;
  padding:  0 10px;
  display: flex;
  border-bottom: 2px dotted black;
  h2{
    margin: 0 20px;
  }
}
</style>